<template>
  <div class="search-warp">
    <!-- <div class="search-item" v-for="(v, k) in searchList" :key="k">{{ v }}</div> -->
    <div class="v">
      <video class="f" autoplay muted playsinline="" loop="">
        <source
          src="https://www.apple.com.cn/105/media/ww/apple-music/2021/7a99fc54-5af3-4513-8343-4c67c10b9f65/anim/value-props/large.mp4"
          type="video/mp4"
        />
      </video>
      <div class="banner">听见美好声音</div>
    </div>
    <div class="search-title">
      <span
        v-for="(item, index) in searchTitle"
        :key="index"
        @click="queryTitle(item.count, index)"
        :class="searchTitleIndex == index ? 'active' : ''"
        >{{ item.name }}</span
      >
    </div>
    <el-table :data="tableData" v-if="isTable"  v-loading="loading">
      <el-table-column
        prop="name"
        label="歌曲"
        width="350"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-link
            icon="el-icon-video-play"
            style="margin-left: 5px"
            :underline="false"
            @click="sendAudio(scope.row.id)"
          >
            {{ scope.row.name }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="singer" label="歌手" width="200">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span style="margin-left: 5px">{{ scope.row.singer }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="album"
        label="专辑"
        width="350"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <i class="iconfont">&#xe64b;</i>
          <span style="margin-left: 5px">{{ scope.row.album }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="durationtime" label="时长">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 5px">{{ scope.row.durationtime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import bus from "@utils/bus/bus";
import { formatSongTime } from "@/utils/public";
import { search } from "@/api/api";
export default {
  name: "search",
  data() {
    return {
      searchQuery: {},
      searchTitle: [
        { name: "单曲", count: 1 },
        { name: "专辑", count: 10 },
        { name: "歌手", count: 1000 },
        { name: "歌单", count: 1002 },
        { name: "MV", count: 1006 },
      ],
      searchTitleIndex: 0,
      tableData: [],
      isTable: true,
      loading:false,
    };
  },
  mounted() {
    this.searchQuery = this.$route.query;
    bus.$emit("keywords", this.searchQuery.keywords);
  },
  methods: {
    heandelSearch() {
      this.loading = true
      search(this.searchQuery).then((res) => {
        this.tableData = [];
        if (res.data.code == "200") {
          let _songsList = res.data.result.songs;
          if(!_songsList) return
          console.log(res.data.result.songs);
          _songsList.forEach((e) => {
            let obj = {
              name: null,
              singer: null,
              album: null,
              durationtime: null,
              id:null
            };
            obj.name = e.name;
            obj.singer = e.artists[0].name;
            obj.album = e.album.name;
            obj.durationtime = formatSongTime(e.duration);
            obj.id = e.id
            this.tableData.push(obj);
            this.loading = false
          });
        }
      });
    },
    queryTitle(v, i) {
      this.searchTitleIndex = i;
      if (i == 0) {
        this.isTable = true;
        this.heandelSearch();
      } else if (i == 1) {
        this.isTable = false;
      }
      this.$router.push({
        query: { keywords: this.searchQuery.keywords, type: v },
      });
    },
    sendAudio(v){
      this.getMusic(v)
    }
  },
  watch: {
    // 监听路由参数变化
    "$route.query": {
      immediate: true,
      handler(v) {
        this.searchQuery.keywords = v.keywords;
        this.searchQuery.type = v.type;
        if (v.keywords && v.keywords.length > 0) {
          this.heandelSearch();
        }
      },
    },
    deep: true,
  },
  beforeDestroy() {},
};
</script>

<style lang='less' scoped>
.search-warp {
  margin: 100px auto 0 auto;
  .banner {
    width: 100%;
    background-size: 100%;
    font-size: 45px;
    font-family: "hmB";
    color: #fff;
    text-align: center;
    line-height: 350px;
    letter-spacing: 30px;
    user-select: none;
  }
  .f {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -9999;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
    background-color: rgb(3, 63, 87);
  }
  .v {
    position: relative;
    margin-bottom: -300px;
    width: 100%;
    height: 350px;
    overflow: hidden;
    z-index: -10000;
    background-color: rgb(1, 62, 87);
  }
  .v:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1000;
    top: 0;
    left: 0;
    background: #1d1d1fa8;
  }

  .search-title {
    position: relative;
    top: 350px;
    width: 300px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    span {
      display: inline-block;
      text-align: center;
      font-family: "hmR";
      font-size: 16px;
      color: #6b6b6b;
      cursor: pointer;
    }
    .active {
      border-bottom: 3px solid rgb(61, 116, 240);
    }
  }

  .el-table {
    width: 1200px;
    margin: 370px auto 0;
    font-family: "hmR";
    font-size: 14px;
  }
}
</style>